<template>
	<div>
		<cus-modal
			ref="modal"
			:title="`${days[nums.indexOf(form.key2)]} ( ${form.mealTimeName} )`"
			:width="1150"
			:closable="false"
			@on-visible-change="onVisibleChange"
		>
			<div class="noticeBox">
				<Spin size="large" fix v-if="form.loading"> </Spin>
				<Tabs value="name1">
					<TabPane label="菜肴配比" name="name1">
						<div class="operBox">
							<span>整体调整：</span>
							<i-switch v-model="switchStatus" />
							<InputNumber
								:max="200"
								:min="0"
								:step="5"
								v-if="switchStatus"
								v-model="switchValue"
								:formatter="(value) => `${value}%`"
								:parser="(value) => value.replace('%', '')"
								@on-change="changeAll"
								style="width:100px;margin-left:20px"
							>
							</InputNumber>
						</div>
						<div>
							<Table border :columns="columns" :data="data" :height="350">
								<template slot-scope="{ row, index }" slot="changeBit">
									<div class="flex">
										<InputNumber
											style="width:65%"
											:max="100"
											:min="0"
											:step="5"
											v-model="row.settlingWeight"
											:formatter="(value) => `${value}%`"
											:parser="(value) => value.replace('%', '')"
											@on-change="
												(num) => {
													changeSetting(num, index)
												}
											"
										>
										</InputNumber>
									</div>
								</template>
								<template slot-scope="{ row }" slot="detailSlot">
									<div
										v-for="(item, idx) in row.aiFoodInfos"
										:key="idx"
										class="bomBox"
										:style="{
											borderBottom:
												idx == row.aiFoodInfos.length - 1 ? 'none' : ''
										}"
									>
										<div class="bomBox-left">{{ item.materialName }}</div>
										<div class="bomBox-right">{{ item.weight }}</div>
									</div>
								</template>
							</Table>
						</div>
					</TabPane>
					<TabPane label="采购计划" name="name2">
						<div class="operBox">
							<span style="margin-right:10px"
								>就餐人数：{{ form.repastNumber }}（人）</span
							>
							<span>计量单位：千克</span>
						</div>
						<div class="flex" style="justify-content:space-between">
							<div style="width:725px">
								<Table
									border
									:columns="columns2"
									:data="tab2Data"
									:height="350"
								>
									<template slot-scope="{ row }" slot="dishWeight">
										<div class="flex">{{ row.dishWeight / 1000 }}</div>
									</template>
									<template slot-scope="{ row }" slot="detailSlot">
										<div
											v-for="(item, idx) in row.materialFormList"
											:key="idx"
											class="bomBox"
											:style="{
												borderBottom:
													idx == row.materialFormList.length - 1 ? 'none' : ''
											}"
										>
											<div class="bomBox-left">{{ item.materialName }}</div>
											<div class="bomBox-right">{{ item.weight / 1000 }}</div>
										</div>
									</template>
								</Table>
							</div>
							<div style="flex:1;margin-left:20px;margin-right:20px">
								<Table
									border
									:columns="columns3"
									:data="tab2Data2"
									:height="350"
								>
									<template slot-scope="{ row, index }" slot="dishWeight">
										<div class="flex">{{ row.weight / 1000 }}</div>
									</template>
								</Table>
							</div>
						</div>
					</TabPane>
					<TabPane label="餐谱评估" name="name3">
						<div
							class="flex"
							style="background:#F2F5F9;padding:24px;justify-content:space-between"
						>
							<div style="width:338px;background:#FFFFFF">
								<div class="contentBox-bottom-item">
									<div class="contentBox-top-item-ab">
										<div>
											<div
												style="font-size: 18px;font-weight: 600;color: #000000;"
											>
												伙食费/人均
											</div>
											<div
												style="font-size: 12px;color: #666666;font-weight: 400;"
											>
												伙食费/人均柱状图
											</div>
										</div>
										<div></div>
									</div>
									<div
										id="container12"
										style="margin:40px 0 20px 0"
										:style="{ height: '300px', width: '338px' }"
									></div>
								</div>
							</div>
							<div style="width:338px;background:#FFFFFF">
								<div class="contentBox-bottom-item">
									<div class="contentBox-top-item-ab">
										<div>
											<div
												style="font-size: 18px;font-weight: 600;color: #000000;"
											>
											营养素产热比/100克
											</div>
											<div
												style="font-size: 12px;color: #666666;font-weight: 400;"
											>
											营养素产热比/100克
											</div>
										</div>
										<div></div>
									</div>
									<div
										id="container10"
										style="margin:40px 0 20px 0"
										:style="{ height: '300px', width: '338px' }"
									></div>
								</div>
							</div>

							<div style="width:338px;background:#FFFFFF">
								<div class="contentBox-bottom-item">
									<div class="contentBox-top-item-ab">
										<div>
											<div
												style="font-size: 18px;font-weight: 600;color: #000000;"
											>
												食物定量/人均
											</div>
											<div
												style="font-size: 12px;color: #666666;font-weight: 400;"
											>
												食物定量/人均柱状图
											</div>
										</div>
										<div></div>
									</div>
									<div
										id="container11"
										style="margin:40px 0 20px 0"
										:style="{ height: '300px', width: '338px' }"
									></div>
								</div>
							</div>
						</div>
						<div style="color:gray;font-size:10px;padding: 10px 0">
							*备注：按全天标准评估
						</div>
					</TabPane>
				</Tabs>
			</div>
			<div slot="footer">
				<slot name="footer">
					<div class="modal-footer">
						<cus-button size="small" class="mr_2" @onClick="onCancel"
							>取消</cus-button
						>
						<cus-button type="primary" size="small" @onClick="onOk"
							>确认</cus-button
						>
					</div>
				</slot>
			</div>
		</cus-modal>
	</div>
</template>

<script>
import {
	getMealPlanTimesDishBomFoodInfo,
	updateMealPlanTimesDishBomFoodInfo,
	getMealPlanTimesDishPurchasingPlan,
	realTimeCalculateMealPlanDishAssessment
} from '@/api/business/dishesModule'
import * as echarts from 'echarts'
export default {
	components: {},
	name: 'changeWeight',
	data() {
		return {
			days: [
				'星期一',
				'星期二',
				'星期三',
				'星期四',
				'星期五',
				'星期六',
				'星期日'
			],
			form: {
				key: 'breakfast',
				key2: 'one',
				mealTimeName: '早餐',
				name: '',
				loading: false,
				mealPlanId: 0,
				repastNumber: 0
			},
			data: [], // 菜品列表
			mealTimeList: [
				{ label: 'breakfast', name: '早餐', type: 0 },
				{ label: 'betwwenMealOne', name: '早~午间餐', type: 3 },
				{ label: 'lunch', name: '午餐', type: 1 },
				{ label: 'betwwenMealTwo', name: '午~晚间餐', type: 4 },
				{ label: 'supper', name: '晚餐', type: 2 },
				{ label: 'midnightMealOne', name: '夜餐1', type: 5 },
				{ label: 'midnightMealTwo', name: '夜餐2', type: 6 }
			],
			nums: ['one', 'two', 'three', 'four', 'five', 'six', 'seven'],
			switchStatus: false,
			switchValue: 100,
			columns: [
				{
					title: '菜肴名称',
					key: 'dishName',
					align: 'center'
				},
				{
					title: '菜肴分类',
					key: 'dishType',
					align: 'center'
				},
				{
					title: '调整',
					slot: 'changeBit',
					align: 'center'
				},
				{
					title: '总量(克)',
					key: 'dishWeight',
					align: 'center'
				},
				{
					title: '原料配比(克) / 100人份',
					slot: 'detailSlot',
					minWidth: 200,
					align: 'center'
				}
			],
			columns2: [
				{
					title: '菜肴名称',
					key: 'dishName',
					align: 'center'
				},
				{
					title: '菜肴分类',
					key: 'dishType',
					align: 'center'
				},
				{
					title: '总量',
					slot: 'dishWeight',
					align: 'center'
				},
				{
					title: '配料量',
					slot: 'detailSlot',
					minWidth: 200,
					align: 'center'
				}
			],
			columns3: [
				{
					type: 'index',
					width: 60,
					align: 'center'
				},
				{
					title: '食材名称',
					key: 'materialName',
					align: 'center'
				},
				{
					title: '总下料量',
					slot: 'dishWeight',
					align: 'center'
				}
			],
			tab2Data: [], // 采购计划列表
			tab2Data2: [],
			meal_money_standard: 0, // 标准伙食费
			meal_money: 0, // 实际伙食费
			otherRation: [], //
			standardOtherRation: []
		}
	},
	mounted() {},
	methods: {
		onVisibleChange(v) {
			if (!v) {
				this.form = {
					key: 'breakfast',
					key2: 'one',
					mealTimeName: '早餐',
					name: '',
					loading: false,
					mealPlanId: 0,
					repastNumber: 0
				}
				this.switchValue = 100
				this.switchStatus = false
			}
		},
		show(id, row, selectData, repastNumber, parentData, boardId) {
			this.$refs['modal'].show = true
			if (row) {
				this.form.mealPlanId = id
				this.form.key = this.$cu.deepClone(row.key)
				this.form.key2 = this.$cu.deepClone(row.key2)
				this.form.repastNumber = repastNumber
				this.form.mealTimeName = this.mealTimeList.filter(
					(item) => item.label == row.key
				)[0].name
				// this.selectData = this.$cu.deepClone(selectData);
				this.data = []
				this.getMealPlanTimesDishBomFoodInfoApi(selectData)
				this.tab2Data = []
				this.tab2Data2 = []
				this.getMealPlanTimesDishPurchasingPlanApi(selectData)
				this.meal_money_standard = 0
				this.meal_money = 0
				this.otherRation = []
				this.standardOtherRation = []
				this.realTimeCalculateMealPlanDishAssessmentApi(
					row.key,
					row.key2,
					parentData,
					boardId
				).then(() => {
					this.myChart4()
					this.myChart11()
					this.myChart12()
				})
			}
		},
		onInit() {},
		// 确认发布
		onOk() {
			if (this.data.length) {
				this.updateMealPlanTimesDishBomFoodInfoApi()
			} else {
				this.$Message.warning('暂无菜肴信息，不可执行此项操作.')
			}
		},
		// 确认删除
		onDelete() {
			this.$emit('onDelete', this.form)
			this.$refs['modal'].show = false
		},
		//模态框取消
		onCancel() {
			this.$refs['modal'].show = false
		},
		// 获取菜肴配比接口
		getMealPlanTimesDishBomFoodInfoApi(selectData) {
			this.form.loading = true
			return new Promise((resolve) => {
				getMealPlanTimesDishBomFoodInfo({
					food: selectData,
					mealPlanId: this.form.mealPlanId,
					mealTime: this.mealTimeList.filter(
						(item) => item.label == this.form.key
					)[0].type,
					week: this.form.key2
				}).then((res) => {
					this.form.loading = false
					if (res.retCode == 2000) {
						res.data.forEach((item) => {
							item.copydishWeight = this.$cu.deepClone(
								item.dishWeight / (item.settlingWeight / 100)
							)
							item.aiFoodInfos.forEach((it) => {
								it.copyweight = this.$cu.deepClone(
									it.weight / (item.settlingWeight / 100)
								)
							})
						})
						this.data = res.data
						resolve()
					}
				})
			})
		},
		// 修改菜肴配比
		updateMealPlanTimesDishBomFoodInfoApi() {
			this.form.loading = true
			return new Promise((resolve) => {
				updateMealPlanTimesDishBomFoodInfo({
					food: this.data,
					mealPlanId: this.form.mealPlanId,
					mealTime: this.mealTimeList.filter(
						(item) => item.label == this.form.key
					)[0].type,
					week: this.form.key2
				}).then((res) => {
					this.form.loading = false
					if (res.retCode == 2000) {
						this.$Message.success('菜肴配比修改成功.')
						this.$refs['modal'].show = false
						this.$emit('changeSettingSuccess')
						resolve()
					}
					if (res.retCode != 2000) {
						this.$Message.error(res.retMsg)
					}
				})
			})
		},
		getMealPlanTimesDishPurchasingPlanApi(selectData) {
			return new Promise((resolve) => {
				getMealPlanTimesDishPurchasingPlan({
					food: selectData,
					mealPlanId: this.form.mealPlanId,
					mealTime: this.mealTimeList.filter(
						(item) => item.label == this.form.key
					)[0].type,
					week: this.form.key2,
					repastNumber: this.form.repastNumber
				}).then((res) => {
					if (res.retCode == 2000) {
						this.tab2Data = res.data.materialForms
						this.tab2Data2 = res.data.sumMaterialForms
						resolve()
					}
				})
			})
		},
		// 比重切换
		changeSetting(num, index) {
			this.$set(this.data[index], 'settlingWeight', num)
			let countTotal = this.data[index].copydishWeight * (num / 100)
			// 最低重量不得少于50克
			if (countTotal >= 50) {
				this.$set(
					this.data[index],
					'dishWeight',
					parseFloat(countTotal.toFixed(2))
				)
			} else {
				this.$set(this.data[index], 'dishWeight', 50)
			}
			this.data[index].aiFoodInfos.forEach((element, idx) => {
				let countItem = element.copyweight * (num / 100)
				this.$set(this.data[index].aiFoodInfos[idx], 'settlingWeight', num)
				this.$set(this.data[index].aiChineseBomFood[idx], 'settlingWeight', num)
				if (countItem >= 50) {
					this.$set(
						this.data[index].aiFoodInfos[idx],
						'weight',
						parseFloat(countItem.toFixed(2))
					)
					this.$set(
						this.data[index].aiChineseBomFood[idx],
						'weight',
						parseFloat(countItem.toFixed(2))
					)
				} else {
					this.$set(this.data[index].aiFoodInfos[idx], 'weight', 50)
					this.$set(this.data[index].aiChineseBomFood[idx], 'weight', 50)
				}
			})
		},
		// 全部切换
		changeAll(num) {
			this.data.forEach((item, index) => {
				this.$set(this.data[index], 'settlingWeight', num)
				this.changeSetting(num, index)
			})
		},
		myChart4() {
			//1.echarts初始化。
			let myChart = echarts.init(document.querySelector('#container10'))
			//2.设置图表配置项
			// 绘制图表
			let option

			option = {
				tooltip: {
					trigger: 'item'
				},
				legend: {
					bottom: '0'
				},
				grid: {
					top: '1%',
					left: '1%',
					right: '10%',
					bottom: '5%',
					containLabel: true
				},
				series: [
					{
						name: '营养分析/人均',
						type: 'pie',
						radius: ['40%', '60%'],
						avoidLabelOverlap: false,
						label: {
							normal: {
								show: true,
								formatter: '{b}\n{d}%' // 格式化数值百分比输出
							}
						},
						emphasis: {
							label: {
								show: true
							}
						},
						labelLine: {
							show: true
						},
						data: [
							{ value: 16.84, name: '蛋白质' },
							{ value: 77.22, name: '碳水' },
							{ value: 5.94, name: '脂肪' }
						]
					}
				]
			}
			option && myChart.setOption(option)
			window.onresize = function() {
				myChart.resize()
			}
		},
		myChart11() {
			//1.echarts初始化。
			let myChart = echarts.init(document.querySelector('#container11'))
			//2.设置图表配置项
			// 绘制图表
			let option

			option = {
				xAxis: {
					data: ['粮食', '畜肉', '禽肉', '禽蛋', '鱼虾', '牛奶', '大豆', '蔬菜']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '10%',
					containLabel: true
				},
				legend: {
					bottom: '0%'
				},
				yAxis: {},
				series: [
					{
						type: 'bar',
						name: '标准',
						data: this.standardOtherRation,
						itemStyle: {
							normal: {
								color: '#49AFFF',
								label: {
									show: true,
									position: 'top',
									color: '#49AFFF'
								}
							}
						}
					},
					{
						type: 'bar',
						name: '实际',
						data: this.otherRation,
						itemStyle: {
							normal: {
								color: '#FFD966',
								label: {
									show: true,
									position: 'top',
									color: '#FFD966'
								}
							}
						}
					}
				]
			}
			option && myChart.setOption(option)
			window.onresize = function() {
				myChart.resize()
			}
		},
		myChart12() {
			//1.echarts初始化。
			let myChart = echarts.init(document.querySelector('#container12'))
			//2.设置图表配置项
			// 绘制图表
			let option

			option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '10%',
					containLabel: true
				},
				legend: {
					bottom: '0%'
				},
				xAxis: {
					type: 'value',
					boundaryGap: [0, 0.01]
				},
				yAxis: {
					type: 'category',
					data: ['伙食费']
				},
				series: [
					{
						name: '标准',
						type: 'bar',
						data: [this.meal_money_standard],
						label: {
							normal: {
								show: true,
								formatter: '标准伙食费: {c}元' // 格式化数值百分比输出
							}
						}
					},
					{
						name: '实际',
						type: 'bar',
						data: [this.meal_money],
						label: {
							normal: {
								show: true,
								formatter: '实际伙食费: {c}元', // 格式化数值百分比输出
								color: 'black'
							}
						}
					}
				]
			}
			option && myChart.setOption(option)
			window.onresize = function() {
				myChart.resize()
			}
		}, // 实时计算食谱菜肴评估-按天为单位 -- 接口
		realTimeCalculateMealPlanDishAssessmentApi(key, key2, parentData, boardId) {
			let aItem = {}
			let aArr = parentData[key].dayMeal[key2].food.map((item) => item.dishCode)
			aItem[key] = aArr
			this.mealTimeList.forEach((item, index) => {
				if (aItem[item.label] == undefined) {
					aItem[item.label] = []
				}
			})
			aItem.week = key2
			aItem.mealPlanId = this.form.mealPlanId
			aItem.boardId = boardId
			aItem.mealRepastNumber = []
			for (const keydata in parentData) {
				aItem.mealRepastNumber.push({
					weekTime: key2,
					mealTime: parentData[keydata].dayMeal[key2].time_type,
					repastNumber: parentData[keydata].dayMeal[key2].repastNumber,
					repurDate: parentData[keydata].dayMeal[key2].meal_date
				})
			}
			console.log(aItem)
			return new Promise((resolve) => {
				realTimeCalculateMealPlanDishAssessment(aItem).then((res) => {
					this.loading = false
					if (res.retCode == 2000) {
						this.meal_money_standard =
							res.data.meal_money[this.form.key2].meal_money_standard
						this.meal_money = res.data.meal_money[this.form.key2].meal_money
						this.otherRation =
							res.data.quantifyAnalysis[this.form.key2].otherRation
						this.standardOtherRation =
							res.data.quantifyAnalysis[this.form.key2].standardOtherRation
						resolve()
					} else this.$Message.error(res.retMsg)
				})
			})
		}
	}
}
</script>

<style scoped lang="less">
/deep/.ivu-table-cell {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.operBox {
	margin-bottom: 10px;
	height: 32px;
	display: flex;
	align-items: center;
}

.bomBox {
	display: flex;
	border-bottom: 1px solid #e3e8ee;
	min-height: 40px;
	&-left {
		border-right: 1px solid #e3e8ee;
		width: 50%;
		line-height: 40px;
	}
	&-right {
		width: 50%;
		line-height: 40px;
	}
}
.contentBox {
	&-top {
		// height: 48%;
		display: flex;
		justify-content: space-between;
		&-item {
			width: 49%;
			// height: 100%;
			background: #ffffff;
			position: relative;
			&-ab {
				height: 12%;
				position: absolute;
				width: 100%;
				top: 30px;
				display: flex;
				justify-content: space-between;
				padding: 0 1%;
			}
		}
	}
}
</style>
